<template>
    <el-dialog
        title="留言内容"
        :visible.sync="dialogVisible"
        width="70%"
        @close="handleClose"
        :before-close="handleClose">
        <div class="innermsg-content-page" id="page" v-loading="loading">
          <el-form ref="ruleForm" 
            :inline="true" 
            label-position="right"
            label-width="100PX" size="small">
            <el-row>
              <el-col :span="24">
                <el-form-item class="layout-item" label="标题: ">
                  <span>{{msgDetailParams.title}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="留言类型: ">
                  <span>{{msgDetailParams.typeName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="联系人名称: ">
                  <span>{{msgDetailParams.studentName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="联系人电话: ">
                  <span>{{msgDetailParams.phone}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="描述: ">
                  <span>
                    <!-- 您需在认真阅读及独立思考的基础上认可、同意本协议的全部条款。
                    如您对本协议或协议的任何部分，及/或随时对其的修改存在有任何异议，
                    立即停止注册及/或使用本平台所提供的全部服务。
                    如您是未成年用户，请在法定监护人的陪同下仔细阅读本服务协议，
                    您及法定监护人应按照法律及本协议规定承担责任。 -->
                    {{msgDetailParams.remark}}
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item class="layout-item" label="附件: ">
                  <a style="color: #3582fb" :href="msgDetailParams.fileUrl">{{getFileName(msgDetailParams.fileUrl)}}</a>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
          <div class="history-reply-title">历史留言记录：</div>
          <div class="ask-answer-box" v-for="(item, i) in msgDetailParams.messageInfoRespDTOList" :key="i" 
            v-if="msgDetailParams.messageInfoRespDTOList && msgDetailParams.messageInfoRespDTOList.length > 0">
            
            <div class="top-info">
                <span>{{item.remark}}</span>
                <span class="reply-word">{{item.replyType == '1' ? '学生回复' : '系统回复'}}</span>
            </div>
            <div class="bottom-info">
              <p class="content">回复时间: {{getFormateTime(item.createTime)}}</p>
              <span>回复人：{{item.reply}}</span>
            </div>
            
          </div>
          <el-form ref="ruleForm" 
            v-if="isShowReply"
            :inline="true" 
            label-position="right"
            label-width="100PX" size="small">
              <el-form-item class="layout-item" label="回复">
                <el-input type="textarea" :maxlength="500" v-model="remark" style="width: 500px" :rows="5" show-word-limit></el-input>
              </el-form-item>
          </el-form>
          <el-button v-if="isShowReply" class="confirm-btn" @click="handleConfirm" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>
<script>
// msgDetail
import { replyMsg, msgDetail } from '@/api/inner-msg/index.js';
import { formatDate } from '@/utils/index.js';
import IFrame from "@/components/iFrame/index";
import VideoPlayer from '@/components/videoPlayer'
export default {
  // 组件名称
  name: "ViewNews",
  // 组件参数 接收来自父组件的数据
  props: {},
  components: {
    IFrame,
    VideoPlayer
  },
  // 组件状态值
  data() {
    return {
        dialogVisible: false,
        msgDetailParams: {},
        total: 0,
        pageIndex: 0,
        loading: true,
        studentId: null,
        pdfList: [],
        remark: '',
    };
  },
  computed: {
    isShowReply() {
      return this.msgDetailParams.status === '0' || this.msgDetailParams.status === '1' || this.msgDetailParams.status === '4'
    }
  },
  created() {
    this.init();
  },
  // 组件方法
  methods: {
    open(id) {
        this.dialogVisible = true;
        this.msgDetail(id);
    },
    async msgDetail(id) {
      const { code, data } = await msgDetail({id});
      this.msgDetailParams = {
        ...data,
        createTimeStr: formatDate(data.createTime)
      };
    },
    async init() {
      setTimeout(() => {
        this.loading = false;
      }, 2000)
    },
    getFileName(link) {
      if (!link) {
          return '';
      }
      const nameALl = link.split('com/')[1];
      let allList = nameALl.split('-');
      let nameList = allList.slice(0, allList.length - 1);
      let str = '';
      if (nameList && nameList.length > 1) {
        nameList.forEach(v => {
          str = str + (str ? '-' : '') + v
        })
      } else if(nameList.length === 1) {
        str = nameList[0];
      }
      return str.indexOf('zip') > -1 ? str : str + '.zip';
    },
    handleClose() {
      this.dialogVisible = false;
      this.remark = '';
      this.msgDetailParams = {};
      this.$emit('handleClose');
    },
    async handleConfirm() {
      const { code, msg } = await replyMsg({
        fileUrl: '',
        messageId: this.msgDetailParams.id,
        phone: '',
        remark: this.remark,
        reply: this.msgDetailParams.reply,
        studentName: this.msgDetailParams.studentName,
        messageId: this.msgDetailParams.id
      });
      if (code !== 0) {
        this.$message.error(msg);
        return;
      }
      
      this.$message.success('回复成功');
      this.handleClose();
      this.$emit('success');
    },
    getFormateTime(val) {
      return formatDate(val);
    }
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang='scss'>
  .innermsg-content-page {
    .el-form-item__label {
      flex-shrink: 0;
    }
  }
  
</style>
<style lang="scss" scoped>
.innermsg-content-page {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-height: 600px;
  overflow: auto;
  // padding-bottom: 50px;

  // .confirm-btn {
  //   position: absolute;
  //   bottom: 0;
    
  // }

  .layout-item {
    display: flex;
    margin-bottom: 10px;
  }

  .history-reply-title {
    vertical-align: middle;
    font-size: 14px;
    color: #606266;
    line-height: 40px;
    padding: 0 12px 0 0;
    font-weight: 700;
  }
  .ask-answer-box {
    background: #F9F9F9;
    border-radius: 6px;
    border: 1px solid #F0F0F0;
    padding: 15px 20px 5px;
    width: 600px;
    margin-bottom: 20px;
    

    .top-info {
        margin-bottom: 5px;
        display: flex;
        justify-content: space-between;
        // height: 21px;
        font-size: 15px;
        font-weight: 400;
        color: #9597A0;
        word-break: break-all;

        .reply-word {
          width: 90px;
          flex-shrink: 0;
          text-align: right;
        }
    }

    .content {
        font-size: 18px;
        font-weight: 400;
        color: #37383D;
        margin: 10px 0;
    }

    .bottom-info {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
}
    .top-title {
      font-size: 30px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #37383D;
      line-height: 42px;
      margin-bottom: 19px;
      margin-top: 0;
    }
    .top-subtitle {
      font-size: 22px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #666;
      margin: 0;
    }
    .top-tip {
      font-size: 14px;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-bottom: 25px;
    }
    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 34px;
      .list-item {
        .item-title {
          font-size: 23px;
          font-weight: 500;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 20px;
        }
        .item-test {
          font-size: 23px;
          font-weight: 400;
          color: #0c0c0c;
          line-height: 32px;
          margin-bottom: 42px;
        }
      }
      .list-img {
        width: 464px;
        height: 298px;
      }
    }
    .contentRow {
      position: relative;
      word-break: break-all;
      word-wrap: break-word;
      img {
        max-width: 100%;
      }
    }
}
.student-selecte {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  overflow-y: scroll;
  .student-item {
    position: relative;
    display: block;
    width: 100%;
    font-size: 18px;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    height: 34px;
    line-height: 34px;
    box-sizing: border-box;
    cursor: pointer;
  }
  .student-item:hover {
    background-color: #f5f7fa;
  }
}
</style>
